require.config({
    baseUrl:"./modules-cart",
    paths:{
        jq: "./libs/jquery.2.2.4.js",
        getJson: "getJson",
        render:"render",
        setLocal:"setLocal",
        allNum:"allNum",
        allPrice:"allPrice",
        allFlag:"allFlag",
    }
})

require(["jq","getJson","render","setLocal","allNum","allPrice","allFlag"],function(_, gj, r, sl, allNum, allPrice, allFlag){

    // 2. 请求本地数据并解析
    let localData = localStorage.getItem("goodsMsg") ? JSON.parse(localStorage.getItem("goodsMsg")) : [];
    
    // 7. 初始计算总数量和总价
    $(".allNum").html(allNum(localData));
    $(".allPrice").html(allPrice(localData));

    // 11. 初始判断全选的选中状态
    $("#allFlag")[0].checked = allFlag(localData);


    // 1. 请求商品数据
    gj({
        url:"http://localhost:3001/json/listAll.json"
    }).then((res)=>{
        // console.log(JSON.parse(res))
        // 解析商品数据
        res = JSON.parse(res).listL.img
        console.log(res)
        console.log(localData)
        // 3. 调用渲染页面功能
        r(res, localData, $("tbody"))
    })
    // let little1=document.querySelectorAll(".little");
    // let setN=document.querySelector(".setNum");
    // for(let b=0;b<little1.length;b++){
    //     setN.oninput=function(){
    //         console.log(1)
    //         little1[b].innerHTML=littleNum(localData)
    //     }        
    // }
    // 4. 事件委托绑定修改数量事件
    $("tbody").on("input",".setNum",function(){
        // 获取id
        let id = $(this).parent().parent().attr("index")
        // console.log(id, $(this).val())
        // 执行修改数据操作
        sl(localData, id, (i)=>{
            localData[i].num = $(this).val();
        })
        console.log(localData)
        // 8. 修改数量时，重新计算总数量和总价
        $(".allNum").html(allNum(localData));
        $(".allPrice").html(allPrice(localData));
        gj({
            url:"http://localhost:3001/json/listAll.json"
        }).then((res)=>{
            // console.log(JSON.parse(res))
            // 解析商品数据
            res = JSON.parse(res).listL.img
            console.log(res)
            console.log(localData)
            // 3. 调用渲染页面功能
            r(res, localData, $("tbody"))
        })
    })
    
    // 5. 事件委托绑定删除事件
    $("tbody").on("click",".del",function(){
        // 获取id
        let id = $(this).parent().attr("index")
        // 删除DOM
        $(this).parent().remove()
        // 执行修改数据操作
        sl(localData, id, (i)=>{
            localData.splice(i, 1)
        })

        // 9. 删除时，重新计算总数量和总价
        
        $(".allNum").html(allNum(localData));
        $(".allPrice").html(allPrice(localData));
    })
    // 6. 事件委托绑定修改选中事件
    $("tbody").on("input",".check",function(){
        // 获取id
        let id = $(this).parent().parent().attr("index")
        // console.log(id, this.checked);
        // 执行修改数据操作
        sl(localData, id, (i)=>{
            localData[i].flag = Number(this.checked);
        })

        // 10. 修改选中状态时，重新计算总数量和总价
        $(".allNum").html(allNum(localData));
        $(".allPrice").html(allPrice(localData));

        // 12. 每次修改单个商品的选中时，重新判断全选的选中状态
        $("#allFlag")[0].checked = allFlag(localData);
    })

    // 13. 绑定全选的选中事件
    $("#allFlag").on("input",function(){
        // console.log(this.checked)
        // 根据全选的选中状态，修改数据
        localData.forEach(val=>{
            val.flag = Number(this.checked)
        })
        // 将数据再存回去
        localStorage.setItem("goodsMsg",JSON.stringify(localData))

        // 修改DOM中的每个复选框的选中状态
        for(let i=0;i<$(".check").length;i++){
            $(".check")[i].checked = this.checked;
        }

        // 修改全选，也需要重新计算总价和总数量
        $(".allNum").html(allNum(localData));
        $(".allPrice").html(allPrice(localData));
    })
})
